<template>
	<div>
		<string-modal
			v-model="show"
			:forceRender="true"
			:title="title"
			wrapClassName="string-import-modal"
			:confirm-loading="confirmLoading"
			@close="onCancel"
		>
			<!-- 导入 -->
			<string-import
				v-if="progress == 'first'"
				:showTemplate="showTemplate"
				:showUpload="showUpload"
				:showRemark="showRemark"
				:templateUrl="getTemplateUrl"
				:accept="accept"
				:size="size"
				:fileName="fileName"
				:uploadUrl="getUploadUrl"
				:remark="remark"
				@upload-success="handleUploadFile"
				@uploadChange="handleUploadChange"
			></string-import>
			<!-- 预览数据 -->
			<string-preview
				v-else
				:tableData="tableData"
				:columns="columns"
				:pageConfig="pageConfig"
				:showSizeChanger="showSizeChanger"
				:showQuickJumper="showQuickJumper"
				@pageChange="handlePageChange"
				@stateChange="handleStateChange"
			>
			</string-preview>

			<template slot="footer">
				<div class="import-footer">
					<div class="import-footer-left">
						<string-text-button
							v-if="showRecord && progress == 'first'"
							@click="onOpenImportRecords"
							><img src="../../../images/icon-14.png" alt="" />导入记录</string-text-button
						>
					</div>
					<div class="import-footer-right">
						<slot name="footer">
							<string-button
								type="primary"
								:disabled="!previewId"
								v-if="progress == 'first'"
								@click="toNext"
								>下一步</string-button
							>
							<string-button type="primary" v-if="progress == 'second'" @click="toPrev"
								>上一步</string-button
							>
							<string-button type="primary" v-if="progress == 'second'" @click="toImport"
								>导入</string-button
							>
							<string-button @click="onCancel">取消</string-button>
						</slot>
					</div>
				</div>
			</template>
		</string-modal>
		<!-- 导入记录 -->
		<string-record ref="stringRecord" :importCode="importCode"></string-record>
	</div>
</template>

<script>
import {
	stringUploadFileHeaders,
	stringUploadFilePath,
	queryPreviewData
} from '@/api/public/index';
import { StringImport, StringPreview, StringRecord } from './components/index';
export default {
	name: 'string-data-import',
	components: {
		StringImport,
		StringPreview,
		StringRecord
	},
	props: {
		title: {
			type: String,
			default: '导入'
		},
		showTemplate: {
			// 是否显示下载模板
			type: Boolean,
			default: true
		},
		showUpload: {
			// 是否显示下载模板
			type: Boolean,
			default: true
		},
		showRemark: {
			// 是否显示注意事项
			type: Boolean,
			default: true
		},
		showRecord: {
			// 是否显示导入记录
			type: Boolean,
			default: true
		},
		templateUrl: {
			//模板下载地址
			type: String,
			default: ''
		},
		accept: {
			// 上传的文件类型
			type: String,
			default: '.xls,.xlsx'
		},
		size: {
			// 上传的文件大小，单位：MB
			type: Number,
			default: 2
		},
		uploadUrl: {
			// 上传的地址
			type: String,
			default: stringUploadFilePath
		},
		importCode: {
			// 导入记录类型过滤
			type: String,
			default: null
		},
		remark: {
			//导入说明的数组
			type: Array,
			default: [
				'1、请先下载导入模板，按照导入模板填写数据。',
				'2、点击上传文字按钮或者拖拽文件到上传区域，进行导入文件的上传。',
				'3、上传文件后点击下一步，查看数据是否正确，确认正确后进行数据导入。',
				'4、导入数据时仅导入正确数据，不符合的数据请调整后重新导入。'
			]
		}
	},
	data() {
		return {
			show: false,
			stringUploadFileHeaders,
			tableData: [],
			columns: [],
			fileName: null,
			previewId: null,
			confirmLoading: false,
			progress: 'first',
			pageConfig: {
				pageIndex: 1,
				pageSize: 10,
				total: 10,
				pageSizeOptions: [10, 20, 30]
			}
		};
	},
	computed: {
		remarkList() {
			return this.remark;
		},
		getTemplateUrl() {
			// return window.string.SERVICE_HOST+this.templateUrl
			// return 'http://devtest.stringedu.com' + this.templateUrl;
			return 'http://192.168.0.116:8711' + this.templateUrl;

		},
		getUploadUrl() {
			// return window.string.SERVICE_HOST+this.uploadUrl
			// return 'http://devtest.stringedu.com' + this.uploadUrl;
			return 'http://192.168.0.116:8711' + this.uploadUrl;

		}
	},
	methods: {
		open() {
			this.progress = 'first';
			this.previewId = null;
			this.fileName = null;
			this.show = true;
		},
		onCancel() {
			this.show = false;
		},
		// 文件名
		handleUploadChange(name){
          this.fileName=name
		},
		// 附件上传成功
		handleUploadFile(id) {
			this.previewId = id;
			this.getPreviewData({
				id: id,
				pageIndex: 1,
				pageSize: 10
			});
		},
		// 预览数据分页改变
		handlePageChange(page,size,state) {
			this.getPreviewData({
				id: this.previewId,
				flag:state,
				pageIndex: page.pageIndex,
				pageSize: page.pageSize
			});
			this.pageConfig.pageIndex = page.pageIndex;
			this.pageConfig.pageSize = page.pageSize;
		},
		// 数据状态改变
		handleStateChange(state) {
			this.getPreviewData({
				id: this.previewId,
				flag:state,
				pageIndex: 1,
				pageSize: 10
			});
			this.pageConfig.pageIndex = 1;
			this.pageConfig.pageSize = 10;
		},
		// 预览数据分页改变
		getPreviewData(data) {
			queryPreviewData(data).then(res => {
				if (res.state == 200) {
					this.tableData = res.data.tableData;
					this.columns = res.data.columnList.map(e => {
						if (e.dataIndex == 'flagValue') {
							e.scopedSlots = { customRender: 'flagValue' };
						}
						if (e.dataIndex == 'flag') {
							e.scopedSlots = { customRender: 'flag' };
						}
						return e;
					});
					this.pageConfig.total = res.total;
				} else {
					this.tableData = [];
					this.columns = [];
					this.pageConfig.total = 0;
				}
			});
		},
		// 上一步
		toPrev() {
			this.progress = 'first';
			this.previewId = null;
			this.fileName = null;
		},
		// 下一步
		toNext() {
			this.progress = 'second';
		},
		// 导入
		toImport() {
			this.$emit('on-import', this.previewId, async req => {
				const res = await req;
				if (res.state === 200) {
					this.show = false;
					this.$message.success(res.message);
					this.$emit("import-success")
				} else {
					this.$message.error(res.message);
				}
			});
		},
		// 打开导入记录
		onOpenImportRecords() {
			this.$refs.stringRecord.open();
		},
		// 取消
		onCancel() {
			this.show = false;
		}
	}
};
</script>

<style lang="less" scoped>
::v-deep .string-import-modal {
	.ant-modal {
		width: 838px !important;
	}

	.ant-upload {
		padding: 0;
		border: none;
		width: 100%;
	}

	.item-wrap {
		display: flex;
	}

	.item {
		width: 100%;
		display: flex;
		position: relative;
		border: 1px dashed #dedede;
		border-radius: 4px;

		.icon-box {
			width: 111px;
			height: 100%;
			background: #f9f9f9;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			float: left;

			.icon {
				width: 25px;
			}
		}

		.content-box {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 10px 25px 10px 50px;
			background: #fff;
			min-height: 111px;

			.ant-form {
				flex: 1;
			}

			.ant-form-item {
				margin: 6px 0;
			}
		}

		.download-box {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;

			.title {
				font-size: 14px;
				font-weight: bold;
				line-height: 30px;
			}

			p {
				margin: 5px 0;
				line-height: 16px;
				color: #999;
			}
		}
	}

	.item-wrap:not(:last-child) {
		margin-bottom: 16px;
	}
}
.import-footer {
	display: flex;
	justify-content: space-between;
	margin: 0px 68px 0px 68px;
	padding-bottom: 40px;
}
.import-footer-left > .string-text__button--wrap > .string-text__button {
	display: flex;
	align-items: center;
	line-height: 18px;
}
.import-footer-left > .string-text__button--wrap > .string-text__button > img {
	width: 16px;
	margin-right: 5px;
}
</style>